<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container" style="margin-bottom:20px">

      <span style="margin-left:10px">VIP卡卡号：</span>
      <el-input @keyup.enter.native="handleFilter" clearable style="width: 200px;" class="filter-item" placeholder="请输入VIP卡卡号" v-model="listQuery.cardNumber">
      </el-input>

      <span style="margin-left:10px">VIP卡类型：</span>
      <el-select v-model="listQuery.type" clearable placeholder="请选择">
        <el-option v-for="item in vipTypes" :key="item.type" :label="item.typeName" :value="item.type">
        </el-option>
      </el-select>

      <span style="margin-left:10px">VIP卡状态：</span>
      <el-select v-model="listQuery.status" clearable placeholder="请选择" >
        <el-option v-for="item in cardStats" :key="item.id" :label="item.label" :value="item.id">
        </el-option>
      </el-select>

      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
      <br>
      <el-button class="filter-item" style="margin-left: 10px;margin-top: 5px;" type="primary" @click="addNewCard" size="small">创建VIP卡</el-button>
      <el-button class="filter-item" style="margin-left: 10px;margin-top: 5px;" type="primary" @click="addNewCardByBatch" size="small">批量创建VIP卡</el-button>
    </div>

    <el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="数据加载中，请稍后" border fit highlight-current-row style="width: 100%">
      <el-table-column align="center" label="ID" min-width="50">
        <template slot-scope="scope">
          <span>{{scope.row.id}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="110" align="center" label="VIP卡类型" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{scope.row.typeName}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="120" align="center" label="卡号" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{scope.row.cardNumber}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="120" align="center" label="卡密" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{scope.row.cardPassword}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="100" align="center" label="VIP卡状态" prop="status" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{scope.row.status == 0 ? '未使用' : '已使用'}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="120" align="center" label="创建时间" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{scope.row.createTime | dateformat('YYYY-MM-DD HH:mm')}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="120" align="center" label="过期时间" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{scope.row.expiredTime | dateformat('YYYY-MM-DD HH:mm')}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="150">
        <template slot-scope="{row}">
          <el-button size="small" type="danger" plain v-show="row.status == 0" @click="deleteVipCard(row)">注销</el-button>
          <el-button size="small" type="primary" plain v-show="row.status == 0" @click="addUserVip(row)">绑定用户</el-button>
          <span v-show="row.status == 1" style="color:lightgreen;">该卡已被使用</span>
          <span v-show="row.status == 2" style="color:red;">该卡已被使用，且已被解绑</span>
        </template>
      </el-table-column>
    </el-table>

    <div v-show="!listLoading" class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.pageNo" :page-sizes="[10,20,30,50]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

    <!-- 激活VIP卡弹框 -->
    <el-dialog title="VIP卡绑定用户" :visible.sync="dialogShow" width="30%" :before-close="handleClose">
        <span >请输入用户手机号：</span>
        <el-input style="width:200px;" v-model="mobile" placeholder="请输入11位手机号"></el-input>
        <span style="color:red;">{{msgMobile}}</span>
        <br>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogShow = false">取 消</el-button>
            <el-button type="primary" @click="done">确 定</el-button>
        </span>
    </el-dialog>

    <!-- 创建一张VIP卡弹框 -->
    <el-dialog title="创建VIP卡" :visible.sync="dialogCard" width="30%" :before-close="handleClose">
        <span >请选择VIP卡类型：</span>
        <el-select v-model="add.type" clearable placeholder="请选择">
            <el-option v-for="item in vipTypes" :key="item.type" :label="item.typeName" :value="item.type">
            </el-option>
        </el-select>
        <br>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogCard = false">取 消</el-button>
            <el-button type="primary" @click="createNewCard">确 定</el-button>
        </span>
    </el-dialog>

    <!-- 批量创建VIP卡弹框 -->
    <el-dialog title="创建VIP卡" :visible.sync="dialogCardBatch" width="30%" :before-close="handleClose">
        <span >请选择VIP卡类型：</span>
        <el-select v-model="batch.type" clearable placeholder="请选择">
            <el-option v-for="item in vipTypes" :key="item.type" :label="item.typeName" :value="item.type">
            </el-option>
        </el-select>
        <br><br><br>
        <!-- <template>
        <div class="block">
            <span >创建VIP卡数量：</span>
            <el-slider v-model="batch.num" :step="100" :max="1000" show-stops></el-slider>
        </div>
        </template> -->
        <span >创建VIP卡数量：</span>
        <el-input type="number" v-model="batch.num" :min="1" :max="10000" @keyup.native="number($event)" style="width:150px;"></el-input>
        <br>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogCardBatch = false">取 消</el-button>
            <el-button type="primary" @click="createNewCardByBatch">确 定</el-button>
        </span>
    </el-dialog>

  </div>
</template>

<script>
import { getAllVipType, addUserVip, createUserVip, removeUserVipByMobile, removeUserVipById, queryVipCardByPage, deleteVipCardById, addNewVipCard, exportVipCardExcel, addNewVipCardByBatch } from '@/api/vip'
import { exportFile } from '@/utils'

export default {
  name: 'card',
  components: {},
  watch: {
    mobile(e){
      if(!(/^1[345789]\d{9}$/).test(e) && e != ''){
        this.msgMobile = '请输入的正确的手机号码'
      }else{
        this.msgMobile = ''
      }
    }
  },
  data() {
    return{
      vipTypes:[],
      cardStats:[
        { id:0, label:'未绑定' },
        { id:1, label:'已绑定' }
      ],
      listQuery:{
        cardNumber:null,
        type:null,
        status:null,
        pageNo: 1,
        pageSize: 10
      },
      temp:{
        mobile:null,
        cardNumber:null,
        cardPassword:null
      },
      add:{
        type:null
      },
      batch:{
        type:null,
        num:null
      },
      mobile:null,
      msgMobile:'',
      tableKey: 0,
      dialogFormVisible: false,
      list: null,
      total: null,
      listLoading: true,
      dialogShow: false,
      dialogCard: false,
      dialogCardBatch: false
    }
  },
  mounted() {
    this.getList()
    this.getVipType()
  },
  methods: {
    // 验证输入创建VIP卡数量只能是正整数
    number(e){
      var keynum = window.event ? e.keyCode : e.which
      var keychar = String.fromCharCode(keynum)
      if(keynum == 189 || keynum == 190 || keynum == 110 || keynum == 109){
        this.$message.warning('请输入正整数！')
        e.target.value = ''
      }
    },
    // 关闭弹框
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    reloadList() {
      setTimeout(() => {
        this.getList()
      }, 500)
    },
    // 查询所有有效VIP类型
    getVipType(){
      getAllVipType().then(res => {
        if(res.code == 0){
          this.vipTypes = res.data
        }
      }).catch(error => {}
      )
    },
    // 按条件筛选
    handleFilter(){
      this.listQuery.pageNo = 1
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.pageNo = val
      this.getList()
    },
    // 分页查询VIP卡列表
    getList(){
      this.listLoading = true
      const params = this.listQuery
      queryVipCardByPage(params).then(response => {
        const { code, data: { total, list = [] } } = response
        if (code == 0) {
          this.total = total
          this.list = list
          this.listLoading = false
        }
      }).catch(error => {})
    },
    // 通过id注销VIP卡
    deleteVipCard(row){
      deleteVipCardById(row.id).then(res => {
        const { code, message } = res
        if(code == 0){
          this.$notify({
            title: '成功',
            message: '注销成功',
            type: 'success',
            duration: 2000
          })
          this.getList()
        }
      }).catch(error => {})
    },
    addNewCard(){
      this.dialogCard = true
    },
    addNewCardByBatch(){
      this.dialogCardBatch = true
    },
    // 新建VIP卡
    createNewCard(){
      if(this.add.type == null){
        this.$message({
          title: '失败',
          message: 'VIP卡类型为必填项',
          type: 'error',
          duration: 2000
        })
        return
      }
      const params = this.add
      addNewVipCard(params).then(res => {
        if(res.code == 0){
          this.$notify({
            title: '成功',
            message: '创建成功',
            type: 'success',
            duration: 2000
          })
          this.dialogCard = false
          this.getList()
        }else{
          this.$message({
            title: '失败',
            message: message,
            type: 'error',
            duration: 2000
          })
        }
      }).catch(error => {})
    },
    // 获得url下载
    exportVipCardExcel(){
      const num = this.batch.num
      exportVipCardExcel(num).then(res => {
        if(res.code == 0){
          exportFile(res.data)
        }
      }).catch(error => {})
    },
    // 批量创建VIP卡
    createNewCardByBatch(){
      if(this.batch.type == null){
        this.$message({
          title: '失败',
          message: 'VIP卡类型为必填项',
          type: 'error',
          duration: 2000
        })
        return
      }
      if(this.batch.num == null || this.batch.num.trim().length == 0 || this.batch.num.length == 0){
        this.$message({
          title: '失败',
          message: 'VIP卡数量为必填项',
          type: 'error',
          duration: 2000
        })
        return
      }
      const params = this.batch
      addNewVipCardByBatch(params).then(res => {
        if(res.code == 0){
          this.$notify({
            title: '成功',
            message: '批量创建成功',
            type: 'success',
            duration: 2000
          })
          // 下载excel
          this.exportVipCardExcel()
          this.dialogCardBatch = false
          this.batch.num = null
          this.getList()
        }else{
          this.$message({
            title: '失败',
            message: message,
            type: 'error',
            duration: 2000
          })
        }
      }).catch(error => {})
    },
    // 绑定用户
    addUserVip(row){
      this.temp.cardNumber = row.cardNumber
      this.temp.cardPassword = row.cardPassword
      this.dialogShow = true
    },
    done(){
      this.temp.mobile = this.mobile
      if(this.temp.mobile.trim().length == 0 || this.temp.mobile.length == 0){
        this.$message({
          title: '失败',
          message: '手机号为必填项，请输入后再保存',
          type: 'error',
          duration: 2000
        })
        return
      }
      const params = this.temp
      addUserVip(params).then(res => {
        if (res.code == 0) {
          this.$notify({
            title: '成功',
            message: '绑定成功',
            type: 'success',
            duration: 2000
          })
          this.$router.push({ path:'./list' })
        }else{
          this.$message({
            title: '失败',
            message: message,
            type: 'error',
            duration: 2000
          })
        }
      }).catch(() => {})
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.icon-ctx {
  width: 160px;
  height: 80px;
  overflow: hidden;
  margin: 0 auto;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.app-container {
  padding: 20px;
}
.pagination-container {
  margin-top: 30px;
}
</style>
